<template>
  <div class="wrapper">
          <div class="title_wrapper">
            <div class="left_title">
              <el-icon style="font-size:20px;color:#ffab51"><Bell /></el-icon>
              <span class="left_title_text"> 停诊公告 </span>
            </div>
            <div class="right_title">
              <span class="right_title_text">全部</span>
              <el-icon style=""><ArrowRight /></el-icon>
            </div>
          </div>
          <ul class="list_container">
            <li class="list_item">中国人民解放军总医院第六医...</li>
            <li class="list_item">首都医科大学附属北京潞河...</li>
            <li class="list_item">中日友好医院中西医结合心...</li>
          </ul>
        </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'RightWapper03'
  })
</script>
<script lang="ts" setup>
  
</script>

<style scoped>
 .wrapper {
  display: flex;
  flex-direction: column;
  color: #7f7f7f;
}
 .wrapper .title_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.wrapper .title_wrapper .left_title{
  display: flex;
  align-items: center;
}
.wrapper .title_wrapper .left_title_text {
  margin-left: 5px;
}
.wrapper .title_wrapper .right_title {
  cursor: pointer;
}
.wrapper .title_wrapper .right_title_text {
  margin-right: 5px;
}
.wrapper .list_container {
  display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.wrapper .list_container .list_item{
  display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 5px;
    cursor: pointer;
}
.wrapper .list_container .list_item::before{
 content:"";
height:3px;
width:3px;
background-color:#ffab51;
border-radius:50%;
margin-right: 4px;
}
</style>